<template>
  <div>
    用户名：<input v-model="user.name" type="text" /> 年龄：<input
      v-model="user.age"
      type="text"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "",
        age: "",
      },
    };
  },
  // 监听器默认情况无法监听引用类型
  // 如果需要监听引用类型的属性变化，就需要使用深度监听
  // 完整写法：{deep: true, handler(){}}
  watch: {
    user: {
      immediate: true, // 页面加载时自动执行一次
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        // 监听引用数据类型时 newVal 和 oldVal 是一样的
        console.log(newVal, oldVal);
        console.log(this.user);
      },
    },
  },
};
</script>

<style>
</style>